<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点莎莎</button>
    <div></div>
    <input type="text">
    <div id="two" style="width: 100px;height: 100px;">
        我是王楚钦
    </div>
        <script>
            //存放js代码
            //1.获取button按钮 和div标签  
            var btn =document.querySelector('button') ;
            var div =document.querySelector('div') ;
            var input=document.querySelector('input');
            var div2=document.getElementById('two');
            console.log(btn,div);
            //2.给button按钮绑定单击事件
            //dom0级事件绑定需要关键字on
            btn.ondblclick=function(){
                //
                div.innerHTML='我是孙颖莎呀';
                div.style.width='100px';
                div.style.height='100px';
                div.style.backgroundColor='blue';
            }
            //键盘事件
            input.onkeyup=function(){
                console.log('键盘抬起了')
            }
            input.onkeydown=function(){
                console.log('键盘按下了')
            }
            input.onkeypress=function(){
                console.log('持续按下')
            }
            //鼠标移入事件
            div2.onmouseenter =function(){
                div2.style.backgroundColor='pink'
            }
            //鼠标移出事件
            div2.onmouseleave=function(){
                div2.style.backgroundColor='yellow'
            }
        </script>

    
    
</body>
</html>